<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="list"></ul>

  <script src="lib/mustache.js"></script>
  <script>
    const arr = [
      { name: 'jk', age: 23, sex: 'female' },
      { name: 'jk2', age: 24, sex: 'male' },
      { name: 'jk3', age: 23, sex: 'female' }
    ]

    let temlate = `
      <ul>
        {{ #arr }}
        <li>
          <div class="hd">{{ name }}的信息</div>
          <div class="bd">
            <p>姓名：{{ name }}</p>
            <p>年龄：{{ age }}</p>
            <p>性别：{{ sex }}</p>
          </div>
        </li>
        {{ /arr }}
      </ul>
    `

    const data = {
      arr
    }

    const domstr = Mustache.render(temlate, data)

    console.log(domstr)

    document.getElementById('list').innerHTML = domstr
  </script>
</body>
</html>